Voiko elementin näkyvyyden vaihtaa funktioilla .hide (), .show () tai .toggle ()?
Kuinka testaisit, onko elementti näkyvissä tai piilossa?
2020-12-07 21:52:59
1
2
Seuraava
Koska kysymys koskee yhtä elementtiä, tämä koodi saattaa olla sopivampi:
// Tarkistaa näytettävän CSS-sisällön: [none | block], ohittaa näkyvyyden: [true | false]
$ (elementti) .is (": näkyvä");
// Sama toimii piilotettujen kanssa
$ (element) .is (": piilotettu");
Se on sama kuin twerntin ehdotus, mutta sitä sovelletaan yhteen elementtiin; ja se vastaa jQueryn usein kysytyissä kysymyksissä suositeltua algoritmia.
Käytämme jQuery's is () -toimintoa tarkistaaksesi valitun elementin toisella elementillä, valitsimella tai millä tahansa jQuery-objektilla. Tämä menetelmä kulkee DOM-elementtejä pitkin löytääksesi vastauksen, joka täyttää välitetyn parametrin. Se palauttaa arvon tosi, jos ottelu on olemassa, muuten palauta väärän arvon.
|
Voit käyttää piilotettua valitsinta:
// Vastaa kaikkia piilotettuja elementtejä
$ ('element: hidden')
Ja näkyvä valitsin:
// Vastaa kaikkia näkyviä elementtejä
$ ('element: näkyvä')
|
jos ($ (element) .css ('display') == 'ei mitään' || $ (elementti) .css ("näkyvyys") == "piilotettu") {
// 'element' on piilotettu
}
Yllä oleva menetelmä ei ota huomioon vanhemman näkyvyyttä. Jos haluat ottaa huomioon myös vanhemman, käytä .is (": hidden") tai .is (": visible").
Esimerkiksi,
Div2
Yllä oleva menetelmä pitää div2: n näkyvänä, kun taas: visible not. Mutta yllä oleva voi olla hyödyllistä monissa tapauksissa, varsinkin kun sinun on löydettävä, onko piilotetussa vanhemassa näkyvissä virheitä, koska näissä olosuhteissa: visible ei toimi.
|
Yksikään näistä vastauksista ei käsittele mielestäni kysymystä, jota etsin: "Kuinka käsitellä kohteita, jotka ovat näkyvissä: piilossa?" Kumpikaan: näkyvä eikä piilotettu ei käsittele tätä, koska molemmat etsivät näyttöä dokumentaation mukaan. Sikäli kuin pystyin selvittämään, ei ole valitsinta CSS-näkyvyyden käsittelemiseksi. Näin olen ratkaissut sen (tavalliset jQuery-valitsimet, tiivistetty syntaksia voi olla)
$ (". item"). kukin (function () {
jos ($ (this) .css ("visibility") == "hidden") {
// käsittele ei-näkyvää tilaa
} muu {
// käsittele näkyvää tilaa
}
});
|
Kohdasta Kuinka määritän vaihdetun elementin tilan?
Voit määrittää, onko elementti tiivistetty vai ei, käyttämällä valitsimia: visible ja: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Jos toimit yksinkertaisesti elementin näkyvyyden perusteella, voit sisällyttää valitsin-lausekkeeseen vain: visible tai: hidden. Esimerkiksi:
$ ('# myDiv: visible'). animoi ({left: '+ = 200px'}, 'slow');
|
Usein kun tarkastat, onko jokin näkyvissä vai ei, aiot mennä heti eteenpäin ja tehdä jotain muuta sen kanssa. jQuery-ketju tekee tämän helpoksi.
Joten jos sinulla on valitsin ja haluat suorittaa jonkin toiminnon sillä vain, jos se on näkyvissä tai piilotettu, voit käyttää suodatinta (": visible") tai suodatinta (": hidden") ja ketjuttaa sen sitten haluamasi toiminnon ota.
Joten if-lauseen sijaan, kuten tämä:
if ($ ('# btnUpdate'). on (": näkyvä"))
{
$ ('# btnUpdate'). animoi ({width: "toggle"}); // Piilota painike
}
Tai tehokkaampi, mutta vielä ruma:
var-painike = $ ('# btnUpdate');
if (painike.is (": näkyvä"))
{
button.animate ({width: "toggle"}); // Piilota painike
}
Voit tehdä kaiken yhdellä rivillä:
$ ('# btnUpdate'). filter (": visible"). animoi ({width: "toggle"});
|
: Näkyvä valitsin jQuery-dokumentaation mukaan:
Heillä ei ole CSS-näyttöarvoa.
Ne ovat muotoelementtejä, joiden tyyppi = "piilotettu".
Niiden leveys ja korkeus on nimenomaisesti asetettu 0: ksi.
Esi-elementti on piilotettu, joten elementti ei näy sivulla.
Elementit, joiden näkyvyys: piilotettu tai peittämättömyys: 0, katsotaan näkyviksi, koska ne vievät silti tilaa asettelussa.
Tästä on hyötyä joissakin tapauksissa ja hyödytöntä toisissa, koska jos haluat tarkistaa, onko elementti näkyvissä (näyttö! = Ei ole), vanhempien näkyvyyttä ohittamatta, huomaat, että tekemällä .css ("näyttö") == 'ei ole vain nopeampi, mutta palauttaa myös näkyvyyden tarkistuksen oikein.
Jos haluat tarkistaa näkyvyyden näytön sijasta, käytä: .css ("visibility") == "hidden".
Ota huomioon myös jQuery-lisähuomautukset:
Koska: visible on jQuery-laajennus eikä osa CSS-spesifikaatiota, kyselyjä käyttämällä: visible ei voi hyödyntää alkuperäisen DOM querySelectorAll () -menetelmän tuottamaa parannusta. Parhaan suorituskyvyn saavuttamiseksi käytettäessä: näkyvä elementtien valitsemiseksi, valitse ensin elementit puhtaalla CSS-valitsimella ja käytä sitten .filter (": näkyvä").
Lisäksi, jos olet huolissasi suorituskyvystä, sinun tulee tarkistaa, että nyt näet minut… näytä / piilota suorituskyky (04.05.2010). Ja käytä muita menetelmiä elementtien näyttämiseen ja piilottamiseen.
|
Tämä toimii minulle, ja käytän show () ja hide () -toimintoa saadaksesi div: n piilotetuksi / näkyväksi:
jos ($ (this) .css ('display') == 'none') {
/ * koodisi menee tänne * /
} muu {
/ * vaihtoehtoinen logiikka * /
}
|
Kuinka elementtien näkyvyys ja jQuery toimivat;
Elementti voidaan piilottaa näytöllä: none,näkyvyys: piilotettu tai peittävyys: 0. Ero näiden menetelmien välillä:
display: yksikään ei piilota elementtiä, eikä se vie tilaa;
visibility: hidden piilottaa elementin, mutta se vie silti tilaa asettelussa;
opasiteetti: 0 piilottaa elementin nimellä "visibility: hidden", ja se vie silti tilaa asettelussa; Ainoa ero on, että peittävyyden avulla voidaan tehdä elementistä osittain läpinäkyvä;
if ($ ('. target'). is (': hidden')) {
$ ('.. target'). show ();
} muu {
$ ('. target'). hide ();
}
jos ($ ('.. target'). on (': näkyvä')) {
$ ('.. target'). hide ();
} muu {
$ ('.. target'). show ();
}
if ($ ('. target-visibility'). css ('visibility') == 'piilotettu') {
$ ('.. target-visibility'). css ({
näkyvyys: "näkyvä",
näyttö: ""
});
} muu {
$ ('. target-visibility'). css ({
näkyvyys: "piilotettu",
näyttö: ""
});
}
if ($ ('. target-visibility'). css ('opasiteetti') == "0") {
$ ('. target-visibility'). css ({
opasiteetti: "1",
näyttö: ""
});
} muu {
$ ('. target-visibility'). css ({
opasiteetti: "0",
näyttö: ""
});
}
Hyödyllisiä jQuery-vaihtomenetelmiä:
$ ('. click'). napsauta (function () {
$ ('.. target'). Vaihda ();
});
$ ('. click'). napsauta (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). napsauta (function () {
$ ('. target'). fadeToggle ();
});
|
Voit tehdä tämän myös tavallisella JavaScriptiä käyttämällä:
function isRendered (domObj) {
jos ((domObj.nodeType! = 1) || (domObj == document.body)) {
palaa tosi;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibility"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (ikkuna.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "ei mitään" && cs.getPropertyValue ("näkyvyys")! = "piilotettu") {
return isRendered (domObj.parentNode);
}
}
return false;
}
Huomautuksia:
Toimii kaikkialla
Toimii sisäkkäisillä elementeillä
Toimii CSS- ja inline-tyylien kanssa
Ei vaadi kehystä
|
Käytän CSS-luokkaa .hide {display: none! Tärkeä; }.
Piilottamiseksi / esittämiseksi kutsun .addClass ("piilota") /. RemoveClass ("piilota"). Näkyvyyden tarkistamiseksi käytän .hasClassia ("piilota").
Se on yksinkertainen ja selkeä tapa tarkistaa / piilottaa / näyttää elementit, jos et aio käyttää .toggle () - tai .animate () -menetelmiä.
|
Esittelylinkki
$ ('# clickme'). napsauta (function () {
$ ('# kirja'). toggle ('hidas', function () {
// Animaatio valmis.
hälytys ($ ('# kirja'). on (": näkyvä")); // <--- TOSI, jos näkyvä väärä, jos piilotettu
});
});
Klikkaa tästä
Lähde:
Blogger Plug n Play - jQuery-työkalut ja -widgetit: Kuinka nähdä, onko elementti piilotettu vai näkyykö se jQueryn avulla
|
Voidaan käyttää yksinkertaisesti piilotettua tai näkyvää määritettä, kuten:
$ ('element: hidden')
$ ('element: näkyvä')
Tai voit yksinkertaistaa samaa seuraavalla tavalla.
$ (element) .is (": näkyvä")
|
ebdiv: n arvoksi tulisi asettaa style = "display: none;". Se toimii sekä näytä että piilota:
$ (asiakirja) .ready (funktio () {
$ ("# eb"). napsauta (function () {
$ ("# ebdiv"). vaihda ();
});
});
|
Toinen vastaus, joka sinun tulisi ottaa huomioon, on, että piilotat elementin, käytä jQueryä, mutta sen sijaan, että piilottaisit sen, poistat koko elementin, mutta kopioit sen HTML-sisällön ja tunnisteen itse jQuery-muuttujaksi ja sitten Sinun tarvitsee vain testata, onko näytöllä tällaista tunnistetta, käyttämällä normaalia if (! $ ('# thetagname'). -pituutta).
|
Testattaessa jQueryn elementtiä: piilotettu valitsin on otettava huomioon, että absoluuttisesti sijoitettu elementti voidaan tunnistaa piilotetuksi, vaikka niiden alielementit ovatkin näkyvissä.
Tämä vaikuttaa ensinnäkin hieman intuitiiviselta - vaikka tarkemmin tarkastellessasi jQuery-dokumentaatiota, saat asiaankuuluvat tiedot:
Elementtejä voidaan pitää piilotettuina useista syistä: [...] Niiden leveys ja korkeus on nimenomaisesti asetettu 0. [...]
Joten tällä on todellakin merkitystä laatikkomallin ja elementin lasketun tyylin suhteen. Vaikka leveyttä ja korkeutta ei ole asetettu nimenomaisesti 0: ksi, ne voidaan asettaa implisiittisesti.
Katso seuraava esimerkki:
console.log ($ ('. foo'). is (': hidden')); // totta
console.log ($ ('. bar'). is (': hidden')); // väärä
.foo {
sijainti: absoluuttinen;
vasen: 10 kuvapistettä;
yläosa: 10 kuvapistettä;
tausta: # ff0000;
}
.bar {
sijainti: absoluuttinen;
vasen: 10 kuvapistettä;
yläosa: 10 kuvapistettä;
leveys: 20px;
korkeus: 20px;
tausta: # 0000ff;
}
JQuery 3.x -päivitys:
JQuery 3: n avulla kuvattu käyttäytyminen muuttuu! Elementit katsotaan näkyviksi, jos niissä on asetteluikkunoita, mukaan lukien nollaleveydet ja / tai korkeudet.
JSFiddle ja jQuery 3.0.0-alfa1:
http://jsfiddle.net/pM2q3/7/
Samalla JavaScript-koodilla on tällöin tämä lähtö:
console.log ($ ('. foo'). is (': hidden')); // väärä
console.log ($ ('. bar'). is (': hidden'));// väärä
|
Tämä voi toimia:
odottaa ($ ("# message_div"). css ("näyttö")). toBe ("ei mitään");
|
Esimerkki:
$ (asiakirja) .ready (funktio () {
if ($ ("# checkme: hidden"). pituus) {
console.log ('Piilotettu');
}
});
Luokka: Kalat
Tuote: Atlantin lohi
Laji: Salmo salar
Muoto: Pihvit
|
Käytän tarkistaaksesi, onko se näkyvissä:
jos (! $ ('# kirja'). on (': näkyvä')) {
hälytys ('# kirja ei ole näkyvissä')
}
Tai seuraava on myös sam, joka tallentaa jQuery-valitsimen muuttujaan saadakseen paremman suorituskyvyn, kun tarvitset sitä useita kertoja:
var $ kirja = $ ('# kirja')
if (! $ book.is (': näkyvä')) {
hälytys ('# kirja ei ole näkyvissä')
}
|
Käytä luokan vaihtamista, ei tyylin muokkausta. . .
Elementtien "piilottamiseen" tarkoitettujen luokkien käyttö on helppoa ja myös yksi tehokkaimmista menetelmistä. Piilotetun luokan vaihtaminen näyttötyyliin "ei mitään" toimii nopeammin kuin kyseisen tyylin muokkaaminen suoraan. Selitin joitain tästä melko perusteellisesti Stack Overflow -kysymyksessä Kahden elementin kääntäminen näkyviin / piilotettuihin samassa divissa.
JavaScriptin parhaat käytännöt ja optimointi
Tässä on todella valaiseva video Google-käyttöliittymän insinööri Nicholas Zakasin Google Tech Talkista:
Nopeuta Javascriptiäsi (YouTube)
|
Esimerkki adblockerin näkyvän tarkistuksen käytöstä on aktivoitu:
$ (asiakirja) .ready (funktio () {
jos (! $ ("# ablockercheck"). on (": näkyvä"))
$ ("# ablockermsg"). text ("Poista adblocker käytöstä."). show ();
});
"ablockercheck" on tunnus, jonka adblocker estää. Joten tarkistamalla, onko se näkyvissä, voit havaita, onko adblocker päällä.
|
Mikään esimerkki ei loppujen lopuksi sovi minulle, joten kirjoitin omani.
Testit (ei Internet Explorer -suodattimen tukea: alfa):
a) Tarkista, onko asiakirjaa piilotettu
b) Tarkista, onko elementillä nolla leveyttä / korkeutta / peittävyyttä tai näyttöä: ei mitään / näkyvyyttä: piilotettu sisäisiin tyyleihin
c) Tarkista, onko toinen elementti (ja kaikki esi-isät, esimerkiksi: ylivuoto: piilotettu / vieritys / yksi elementti toisen yli) tai näytön reunat piilottaneet elementin keskustaa (myös siksi, että se on nopeampi kuin jokaisen pikselin / kulman testaus)
d) Tarkista, onko elementillä nolla leveyttä / korkeutta / peittävyyttä tai näyttöä: ei mitään / näkyvyyttä: piilotettu lasketuissa tyyleissä (kaikkien esi-isien keskuudessa)
Testattu
Android 4.4 (alkuperäinen selain / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 -asiakirjatilat + Internet Explorer 8) virtuaalikone) ja Safari (Windows / Mac / iOS).
var is_visible = (funktio () {
var x = ikkuna.sivuXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
suhteellinen = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
toiminto sisällä (lapsi, vanhempi) {
kun (lapsi) {
jos (lapsi === vanhempi) palaa tosi;
lapsi = lapsi.parentNode;
}
return false;
};
palautusfunktio (elem) {
jos (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'piilotettu' ||
elem.style.display == ei mitään ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
jos (suhteellinen) {
jos (! sisällä (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) palauttaa false
} muuten jos (
! sisällä (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (ikkuna.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (ikkuna.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (ikkuna.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nolla;
kun (el) {
if (el === asiakirja) {break;} muu jos (! el.parentNode) palauttaa false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
jos (comp && (comp.visibility == 'piilotettu' || comp.display == 'none' || (type of comp.opacity! == 'undefined' && comp.opacity! = 1))] return false;
el = el.parentNode;
}
}
palaa tosi;
}
}) ();
Kuinka käyttää:
is_visible (elem) // looginen
|
Sinun on tarkistettava molemmat ... Näyttö ja näkyvyys:
jos ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Elementti ei ole näkyvissä
} muu {
// Elementti on näkyvissä
}
Jos tarkistamme $ (this) .is (": visible"), jQuery tarkistaa molemmat asiat automaattisesti.
|
Ehkä voit tehdä jotain tällaista
$ (asiakirja) .ready (funktio () {
var näkyvissä =$ ('# tElement'). on (': näkyvä');
jos (näkyvissä) {
hälytys ("näkyvä");
// Koodi
}
muu
{
hälytys ("piilotettu");
}
});
Etunimi
|
Tarkista vain näkyvyys tarkistamalla looginen arvo, kuten:
jos (this.hidden === false) {
// Koodisi
}
Käytin tätä koodia jokaiseen toimintoon. Muuten voit käyttää elementtiä ((: visible)) elementin näkyvyyden tarkistamiseen.
|
Koska elementit, joiden näkyvyys: piilotettu tai peittämättömyys: 0, katsotaan näkyviksi, koska ne vievät silti tilaa asettelussa (kuten kuvataan jQuery: visible Selectorille) - voimme tarkistaa, onko elementti todella näkyvissä tällä tavalla:
function isElementReallyHidden (el) {
palauta $ (el) .is (": hidden") || $ (el) .css ("näkyvyys") == "piilotettu" || $ (el) .css ('peittävyys') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (jotkutEl);
$ (someEl) .vanhemmat (). kukin (function () {
if (isElementReallyHidden (tämä)) {
booElementReallyShowed = väärä;
}
});
|
Mutta entä jos elementin CSS on kuin seuraava?
.element {
sijainti: absoluuttinen; vasen: -9999;
}
Joten tämä vastaus pinon ylivuotokysymykseen Kuinka tarkistaa, onko jokin elementti ruudun ulkopuolella, tulisi myös harkita.
|
Toiminto voidaan luoda näkyvyys- / näyttöominaisuuksien tarkistamiseksi sen arvioimiseksi, näytetäänkö elementti käyttöliittymässä vai ei.
toiminnon tarkistusUIElementVisible (elementti) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Työskentely Fiddle
|
Tässä on myös kolminkertainen ehdollinen lauseke elementin tilan tarkistamiseksi ja sen vaihtamiseksi:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' hidas ');});
|
jos ($ ('# postcode_div'). on (': näkyvä')) {
if ($ ('# postinumero_teksti'). val () == '') {
$ ('# spanPost'). teksti ('\ u00a0');
} muu {
$ ('# spanPost'). teksti ($ ('# postcode_text'). val ());
}
|
1
2
Seuraava
Erittäin aktiivinen kysymys. Ansaitse 10 mainetta vastaamiseksi tähän kysymykseen. Maineen vaatimus auttaa suojaamaan tätä kysymystä roskapostilta ja vastaamattomuudelta.
Eikö vastausta etsit? Selaa muita kysymyksiä, jotka on merkitty koodilla javascript jquery dom, tai esitä oma kysymyksesi.
Lähde:
Blogger Plug n Play - jQuery-työkalut ja -widgetit: Kuinka nähdä, onko elementti piilotettu vai näkyykö se jQueryn avulla
|
Voidaan käyttää yksinkertaisesti piilotettua tai näkyvää määritettä, kuten:
$ ('element: hidden')
$ ('element: näkyvä')
Tai voit yksinkertaistaa samaa seuraavalla tavalla.
$ (element) .is (": näkyvä")
|
ebdiv: n arvoksi tulisi asettaa style = "display: none;". Se toimii sekä näytä että piilota:
$ (asiakirja) .ready (funktio () {
$ ("# eb"). napsauta (function () {
$ ("# ebdiv"). vaihda ();
});
});
|
Toinen vastaus, joka sinun tulisi ottaa huomioon, on, että piilotat elementin, käytä jQueryä, mutta sen sijaan, että piilottaisit sen, poistat koko elementin, mutta kopioit sen HTML-sisällön ja tunnisteen itse jQuery-muuttujaksi ja sitten Sinun tarvitsee vain testata, onko näytöllä tällaista tunnistetta, käyttämällä normaalia if (! $ ('# thetagname'). -pituutta).
|
Testattaessa jQueryn elementtiä: piilotettu valitsin on otettava huomioon, että absoluuttisesti sijoitettu elementti voidaan tunnistaa piilotetuksi, vaikka niiden alielementit ovatkin näkyvissä.
Tämä vaikuttaa ensinnäkin hieman intuitiiviselta - vaikka tarkemmin tarkastellessasi jQuery-dokumentaatiota, saat asiaankuuluvat tiedot:
Elementtejä voidaan pitää piilotettuina useista syistä: [...] Niiden leveys ja korkeus on nimenomaisesti asetettu 0. [...]
Joten tällä on todellakin merkitystä laatikkomallin ja elementin lasketun tyylin suhteen. Vaikka leveyttä ja korkeutta ei ole asetettu nimenomaisesti 0: ksi, ne voidaan asettaa implisiittisesti.
Katso seuraava esimerkki:
console.log ($ ('. foo'). is (': hidden')); // totta
console.log ($ ('. bar'). is (': hidden')); // väärä
.foo {
sijainti: absoluuttinen;
vasen: 10 kuvapistettä;
yläosa: 10 kuvapistettä;
tausta: # ff0000;
}
.bar {
sijainti: absoluuttinen;
vasen: 10 kuvapistettä;
yläosa: 10 kuvapistettä;
leveys: 20px;
korkeus: 20px;
tausta: # 0000ff;
}
JQuery 3.x -päivitys:
JQuery 3: n avulla kuvattu käyttäytyminen muuttuu! Elementit katsotaan näkyviksi, jos niissä on asetteluikkunoita, mukaan lukien nollaleveydet ja / tai korkeudet.
JSFiddle ja jQuery 3.0.0-alfa1:
http://jsfiddle.net/pM2q3/7/
Samalla JavaScript-koodilla on tällöin tämä lähtö:
console.log ($ ('. foo'). is (': hidden')); // väärä
console.log ($ ('. bar'). is (': hidden'));// väärä
|
Tämä voi toimia:
odottaa ($ ("# message_div"). css ("näyttö")). toBe ("ei mitään");
|
Esimerkki:
$ (asiakirja) .ready (funktio () {
if ($ ("# checkme: hidden"). pituus) {
console.log ('Piilotettu');
}
});
|
Käytän tarkistaaksesi, onko se näkyvissä:
jos (! $ ('# kirja'). on (': näkyvä')) {
hälytys ('# kirja ei ole näkyvissä')
}
Tai seuraava on myös sam, joka tallentaa jQuery-valitsimen muuttujaan saadakseen paremman suorituskyvyn, kun tarvitset sitä useita kertoja:
var $ kirja = $ ('# kirja')
if (! $ book.is (': näkyvä')) {
hälytys ('# kirja ei ole näkyvissä')
}
|
Käytä luokan vaihtamista, ei tyylin muokkausta. . .
Elementtien "piilottamiseen" tarkoitettujen luokkien käyttö on helppoa ja myös yksi tehokkaimmista menetelmistä. Piilotetun luokan vaihtaminen näyttötyyliin "ei mitään" toimii nopeammin kuin kyseisen tyylin muokkaaminen suoraan. Selitin joitain tästä melko perusteellisesti Stack Overflow -kysymyksessä Kahden elementin kääntäminen näkyviin / piilotettuihin samassa divissa.
JavaScriptin parhaat käytännöt ja optimointi
Tässä on todella valaiseva video Google-käyttöliittymän insinööri Nicholas Zakasin Google Tech Talkista:
Nopeuta Javascriptiäsi (YouTube)
|
Esimerkki adblockerin näkyvän tarkistuksen käytöstä on aktivoitu:
$ (asiakirja) .ready (funktio () {
jos (! $ ("# ablockercheck"). on (": näkyvä"))
$ ("# ablockermsg"). text ("Poista adblocker käytöstä."). show ();
});
"ablockercheck" on tunnus, jonka adblocker estää. Joten tarkistamalla, onko se näkyvissä, voit havaita, onko adblocker päällä.
|
Mikään esimerkki ei loppujen lopuksi sovi minulle, joten kirjoitin omani.
Testit (ei Internet Explorer -suodattimen tukea: alfa):
a) Tarkista, onko asiakirjaa piilotettu
b) Tarkista, onko elementillä nolla leveyttä / korkeutta / peittävyyttä tai näyttöä: ei mitään / näkyvyyttä: piilotettu sisäisiin tyyleihin
c) Tarkista, onko toinen elementti (ja kaikki esi-isät, esimerkiksi: ylivuoto: piilotettu / vieritys / yksi elementti toisen yli) tai näytön reunat piilottaneet elementin keskustaa (myös siksi, että se on nopeampi kuin jokaisen pikselin / kulman testaus)
d) Tarkista, onko elementillä nolla leveyttä / korkeutta / peittävyyttä tai näyttöä: ei mitään / näkyvyyttä: piilotettu lasketuissa tyyleissä (kaikkien esi-isien keskuudessa)
Testattu
Android 4.4 (alkuperäinen selain / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 -asiakirjatilat + Internet Explorer 8) virtuaalikone) ja Safari (Windows / Mac / iOS).
var is_visible = (funktio () {
var x = ikkuna.sivuXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
suhteellinen = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
toiminto sisällä (lapsi, vanhempi) {
kun (lapsi) {
jos (lapsi === vanhempi) palaa tosi;
lapsi = lapsi.parentNode;
}
return false;
};
palautusfunktio (elem) {
jos (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'piilotettu' ||
elem.style.display == ei mitään ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
jos (suhteellinen) {
jos (! sisällä (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) palauttaa false
} muuten jos (
! sisällä (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (ikkuna.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (ikkuna.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (ikkuna.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nolla;
kun (el) {
if (el === asiakirja) {break;} muu jos (! el.parentNode) palauttaa false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
jos (comp && (comp.visibility == 'piilotettu' || comp.display == 'none' || (type of comp.opacity! == 'undefined' && comp.opacity! = 1))] return false;
el = el.parentNode;
}
}
palaa tosi;
}
}) ();
Kuinka käyttää:
is_visible (elem) // looginen
|
Sinun on tarkistettava molemmat ... Näyttö ja näkyvyys:
jos ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Elementti ei ole näkyvissä
} muu {
// Elementti on näkyvissä
}
Jos tarkistamme $ (this) .is (": visible"), jQuery tarkistaa molemmat asiat automaattisesti.
|
Ehkä voit tehdä jotain tällaista
$ (asiakirja) .ready (funktio () {
var näkyvissä =$ ('# tElement'). on (': näkyvä');
jos (näkyvissä) {
hälytys ("näkyvä");
// Koodi
}
muu
{
hälytys ("piilotettu");
}
});
Etunimi
|
Tarkista vain näkyvyys tarkistamalla looginen arvo, kuten:
jos (this.hidden === false) {
// Koodisi
}
Käytin tätä koodia jokaiseen toimintoon. Muuten voit käyttää elementtiä ((: visible)) elementin näkyvyyden tarkistamiseen.
|
Koska elementit, joiden näkyvyys: piilotettu tai peittämättömyys: 0, katsotaan näkyviksi, koska ne vievät silti tilaa asettelussa (kuten kuvataan jQuery: visible Selectorille) - voimme tarkistaa, onko elementti todella näkyvissä tällä tavalla:
function isElementReallyHidden (el) {
palauta $ (el) .is (": hidden") || $ (el) .css ("näkyvyys") == "piilotettu" || $ (el) .css ('peittävyys') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (jotkutEl);
$ (someEl) .vanhemmat (). kukin (function () {
if (isElementReallyHidden (tämä)) {
booElementReallyShowed = väärä;
}
});
|
Mutta entä jos elementin CSS on kuin seuraava?
.element {
sijainti: absoluuttinen; vasen: -9999;
}
Joten tämä vastaus pinon ylivuotokysymykseen Kuinka tarkistaa, onko jokin elementti ruudun ulkopuolella, tulisi myös harkita.
|
Toiminto voidaan luoda näkyvyys- / näyttöominaisuuksien tarkistamiseksi sen arvioimiseksi, näytetäänkö elementti käyttöliittymässä vai ei.
toiminnon tarkistusUIElementVisible (elementti) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Työskentely Fiddle
|
Tässä on myös kolminkertainen ehdollinen lauseke elementin tilan tarkistamiseksi ja sen vaihtamiseksi:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' hidas ');});
|
jos ($ ('# postcode_div'). on (': näkyvä')) {
if ($ ('# postinumero_teksti'). val () == '') {
$ ('# spanPost'). teksti ('\ u00a0');
} muu {
$ ('# spanPost'). teksti ($ ('# postcode_text'). val ());
}
|
1
2
Seuraava
Erittäin aktiivinen kysymys. Ansaitse 10 mainetta vastaamiseksi tähän kysymykseen. Maineen vaatimus auttaa suojaamaan tätä kysymystä roskapostilta ja vastaamattomuudelta.
Eikö vastausta etsit? Selaa muita kysymyksiä, jotka on merkitty koodilla javascript jquery dom, tai esitä oma kysymyksesi.